<!--
 * @Author: your name
 * @Date: 2021-04-07 17:00:47
 * @LastEditTime: 2021-05-30 14:03:31
 * @LastEditors: Please set LastEditors
 * @Description: 材料总计数据统计
 * @FilePath: /medicine-web/src/views/document/statitics/index.vue
-->
<template>
  <div class="document-statitics-container">
    <p class="font-pattern-8">数据统计</p>
    <!-- <customDateRanger @selectTimeRange="timeRange"></customDateRanger> -->
    <a-row style="margin-top: 30px;">
      <a-col :span="24">
        <lineChart :elementId="'line-chart__one'" :chartTitle="'肿瘤类型年化对比'" :chartData="chartData1"></lineChart>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;">
      <a-col :span="24">
        <lineChart :elementId="'line-chart__two'" :chartTitle="'溶瘤病毒类型年化对比'" :chartData="chartData2"></lineChart>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;" type="flex" justify="space-between" align="middle">
      <a-col style="width: 59%">
        <pieChart :elementId="'pie-chart__one'" :chartTitle="'溶瘤病毒/肿瘤类型统计'" :outterData="outterData" :innerData="innerData"></pieChart>
      </a-col>
      <a-col style="width: 39%">
        <barChart :elementId="'bar-chart__one'" :chartTitle="'材料类型'" :chartData="chartData5"></barChart>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import customDateRanger from '@/components/CustomDateRanger/index'
import lineChart from '@/components/Charts/LineChart'
import pieChart from '@/components/Charts/PieChart'
import barChart from '@/components/Charts/BarChart'
export default {
  name: 'sumStatitics',
  components: { customDateRanger, lineChart, pieChart, barChart },
  data () {
    return {
      chartData1: [],
      chartData2: [],
      outterData: [],
      innerData: [],
      chartData5: []
    }
  },
  methods: {
    timeRange (dateString) {
      console.log('timeRange===========', dateString)
    },
    async fetchData () {
      const res = await this.$action('getSummaryStatitics')
      console.log('===getSummaryStatitics======', res)
      // 瘤种类型(年增长)
      if (res && res.tumor_type_year_data) {
        console.log('tumor_type_year_data', res.tumor_type_year_data)
        const years = Array.from(new Set(res.tumor_type_year_data.map(item => item.year)))
        this.chartData1 = res.tumor_type_year_data.map(item => {
          if (years.indexOf(item.year) == 0) {
            return {
              color: '#6495F9',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else if (years.indexOf(item.year) == 1) {
            return {
              color: '#62DAAA',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else {
            return {
              color: '#5F7293',
              year: item.year,
              data: item.data,
              type: item.type
            }
          }
        })
      }
      // 溶瘤病毒类型(年增长)
      if (res && res.virus_type_year_data) {
        console.log('virus_type_year_data', res.virus_type_year_data)
        const years = Array.from(new Set(res.virus_type_year_data.map(item => item.year)))
        this.chartData2 = res.virus_type_year_data.map(item => {
          if (years.indexOf(item.year) == 0) {
            return {
              color: '#6495F9',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else if (years.indexOf(item.year) == 1) {
            return {
              color: '#62DAAA',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else {
            return {
              color: '#5F7293',
              year: item.year,
              data: item.data,
              type: item.type
            }
          }
        })
      }
      // 瘤种类型(所有)
      if (res && res.tumor_type_data) {
        console.log('tumor_type_data', res.tumor_type_data)
        const tumor_type_data_dict = {
          '肝癌': '#76C3FE',
          '恶性胸腹水': '#B8E0FF',
          '头颈部癌': '#D8EEFF',
          '黑色素瘤': '#F7D266',
          '胰腺癌': '#FAE2A0',
          '肺癌': '#FDF3DA',
          '宫颈癌': '#F2858C',
          '胶质癌': '#F6B2B5',
          '其他': '#F9D2D5'
        }
        this.outterData = res.tumor_type_data.map(item => {
          return {
            value: item.value,
            name: item.name,
            itemStyle: { color: tumor_type_data_dict[item.name] }
          }
        })
      }
      // 溶瘤病毒类型(所有)
      if (res && res.virus_type_data) {
        console.log('virus_type_data', res.virus_type_data)
        const virus_type_data_dict = {
          '重组人5型腺病毒': '#76C3FE',
          'T-VEC': '#B8E0FF',
          'T3011': '#D8EEFF',
          'Pexa-Vec': '#F7D266',
          'Reolysin': '#FAE2A0',
          'DNX-2401': '#FBECC0',
          'Pelareprep': '#FDF3DA',
          'HF10': '#F2858C',
          'Onys-015': '#F6B2B5',
          '其他': '#F9D2D5'
        }
        this.innerData = res.virus_type_data.map(item => {
          return {
            value: item.value,
            name: item.name,
            itemStyle: { color: virus_type_data_dict[item.name] }
          }
        })
      }
      // 材料类型
      if (res && res.material_type_data) {
        console.log('material_type_data', res.material_type_data)
        this.chartData5 = res.material_type_data ? res.material_type_data.reverse() : []
      }
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.document-statitics-container {
  width: 1200px;
  margin: 0 auto;
  padding: 32px 0px 88px 0px;
}
</style>